@charset "utf-8";
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%; background:rgb(231,235,244); list-style: none;}
@media (max-width: 767px) {  
    /*在小于768像素的屏幕里,这里的样式才生效*/
	  body{
		  background:rgb(244,244,244);
		  color:gray;
	  }
	  .pc{
		  display: none;
	  }
	  
	  
	  .phone_wrap{
	  		   padding:0;
	  }
	  .phone{
		  height:250px;
		  background:rgb(255,204,6);
		 /* border:1px solid black; */
	  }
	  
	 
	  /* 轮播图 */
	  #myCarousel{
		  margin-top:20px;
		  /*border: 1px solid red;*/
		  margin: 0 auto;
	  }
	  
	  .carousel-inner{
		  border-radius:5px;
		  /*border:1px solid black;*/
	  }

	.carousel-inner img{
		width:100%;
		height:100%;
	}
	  .phone_content{
		/*  padding:20px 0; */
		  height:580px;
		  margin-top:20px;
		  background:rgb(250,250,250);
		  border-radius: 3px;
	
	  }
	  .data_mode{
		  width:50px;
		  height:80px;
		/* border:1px solid black; */
		  display: inline-block;
	  }
	  .data_mode_wrap{
		  width:100%;
		/* border:1px solid red; */
		  display: flex;
		  justify-content: space-around;
		  padding-top:16px;
	  }
	  .data{
		  width:50px;
		  height:50px;
		  background:yellowgreen;
		  border-radius: 5px;
		  font-size: 11px;
		  line-height: 50px;
		  text-align: center;
	  }

	  .data_mode .text-center{
		  margin-top:6px;
		 /* border:1px solid black; */
	  }
	  
	  .mode_li{
		  height:50px;
		  line-height: 28px;
	  }
	  
	  .light1_input{
	  	font-size: 30px;
	  	-webkit-appearance: none;
	  	-moz-appearance: none;
	  	appearance: none;
	  	width: 3.5em;
	  	height: 1.5em;
	  	background: #ddd;
	  	border-radius: 3em;
	  	position: relative;
	  	cursor: pointer;
	  	outline: none;
	  	-webkit-transition: all .2s ease-in-out;
	  	transition: all .2s ease-in-out;
	  	margin-top:12px;
	  	border: none;
	  	box-shadow: 1px 1px 5px #888888;
	  	-webkit-tap-highlight-color:transparent;
	  }
	  
	  .light1_input:checked{
	  	background: #0ebeff;
	  }
	  
	  /* .light1_input:active{
		   border:0;
		   outline: none;
	   } */
	  
	 .light1_input:after{
	  	position: absolute;
	  	content: "";
	  	width: 1.5em;
	  	height: 1.5em;
	  	border-radius: 50%;
	  	background: #fff;
	  	-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
	  	box-shadow: 0 0 .25em rgba(0,0,0,.3);
	  	-webkit-transform: scale(.7);
	  	transform: scale(.7);
	  	left: 0;
	  	-webkit-transition: all .2s ease-in-out;
	  	transition: all .2s ease-in-out;
	  }
	  
	  .light1_input:checked:after{
	  	left: calc(100% - 1.5em);
	  }
	  
	 /* 控制区域1 自动模式模式和窗帘控制*/
	  .control-wrap1{
		  width:100%;
		  height:100px;
		/* border:1px solid black; */
		  background:#fff;
		  margin-top:10px;
	  }
	  
	  .phone_mode{
		  width:30%;
		   height:100%;
		 /* border:1px solid black; */
	  }
	  .phone_mode li{
		  
	  }
	  .phone_curtain{
		 width:60%;
		 height:100%;
		/* border:1px solid black; */
	  }
	  .button_curtain{
		 padding:0 20px;
	  }
	  .button_curtain_wrap{
		  width:60px;
		  height:60px;
	  }
	  
	  
	/*  控制区域2灯光控制 */
	  .control-wrap2{
		  width:100%;
		  height:150px;
		  margin-top:20px;
	  }
	  .light1_wrap{
		  padding:20px 0;
		  height:120px;
		  width:45%;
	  }
	  .btn{
		  width:35px;display: block;
	  }
	 
	  .btn-default{
		 width:35px;
		 display: block;
		 margin-top:10px;
	  }
	
	/*  控制区域3 空调控制 */
	 .control-wrap3{
		 margin-top:15px;
		 padding:0 10px;
		   width:100%;
		   height:180px;
		   background:#fff;
		   border-radius: 5px;
		 /* border:1px solid black; */
		  position: relative;
	  }

	  .aircondition{
		   width:80%;
		   height:180px;
		   margin:0 auto;
     }  
	 
	 .aircondition_row_1{
		 margin:0 auto;
		 width:50px;
		 height:50px;
	 }
	 .aircondition_row_2{
		 display: flex;
		 justify-content: space-around;
		 align-items: center; 
		  margin:0 auto;
		  width:200px;
		  height:80px;
	 }
	 
	 .mode_code{
		 width:50px;
		 height:50px;
	 }
	 
	 .air_data{
		 width:50px;
		 height:80px;
		 padding:7px 4px;
	 }
	 .switch{
		 width:40px;
		 height:40px;
	 }
	 .degree{
		 width:40px;
		 height:20px;
		 margin-top:8px;
		 font-size: 16px;
	 }
	 .mode_hot{
		 width:50px;
		 height:50px;
	 }

	 .aircondition_row_3{
		 margin:0 auto;
		 width:50px;
		 height:50px;
	 }
	 
	 .air_text_absolute{
		 position: absolute;
		 top:10px;
	 }
	} 
@media (min-width: 768px) and (max-width: 992px) {
    /*小屏幕设备 平板*/
	body{
		 background:pink;
	}
	
	.phone_wrap{
			  display: none;
	}

	.container-fluid{
		/* border:1px solid black; */
		padding:0;
		margin:0;
		margin-top:165px;         /* 修改*/
	}


	.wrapper{
		/* border:1px solid red; */
		padding: 0;                /* 修改*/
	}

	#content{
		display: flex;
		margin-top:20px;
		justify-content: space-between;
		border:1px solid #ddd;
	}

	 .left{
		 width:200px;
	 }

	.left .moudle li{
	   height:100px;
	   line-height: 80px;
	   font-size:15px;

	}

	.left .index li{
		height:75px;
		font-size: 20px;
	}

	.left .index li span{
		/*border:1px solid black;*/
		display: block;
		font-size: 18px;
		line-height:55px;
		float:left;
		margin-left:25px;
	}

	.left .index img{
		float:left;
		 width:30px;
		 height:40px;
	 }

	 #right{
		width: 790px;
		height:590px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#content #right #content-top{
		width:100%;
		height:290px;
		display: flex;
		justify-content: space-between;
	}

	#content #right #content-top-left{
		width:390px;
		height:290px;
		background:white;
	}

	#content #right #content-top-right{
		width:390px;
		height:290px;
		background:white;
	}

	#content #right #content-bottom{
		width:100%;
		height:290px;
		display: flex;
		justify-content: space-between;
	}

	#content #right #content-bottom-left{
		width:390px;
		height:290px;
		background:white;
		position: relative;
	}

	#monitor-button{
		width:250px;
		height:30px;
		margin-top:20px;
		border:0;
		margin-left:20px;
	}

	#monitor-video{
		width:300px;
		height:180px;
		border:1px solid #ddd;
		margin-left:20px;
		margin-top:5px;
	}

	#content #right #content-bottom-right{
		width:390px;
		height:290px;
		background:white;
		position: relative;
	}

	#title-a{
		width:100px;
		height:26px;
		font-size:17px;
		margin-top:25px;
		text-align: center;
		margin-left:24px;
		color:gray;
	}

	#body-a{
		width:250px;
		height:160px;
		margin:0 auto;
		margin-top:32px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#floodlight{
		width:250px;
		height:70px;
		display: flex;
		justify-content: space-around;
		background: rgb(231,235,244);
		border-radius: 5px;
	}

	#floodlight-box{
	}

	#led1{
		font-size: 30px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 3.5em;
		height: 1.5em;
		background: #ddd;
		border-radius: 3em;
		position: relative;
		cursor: pointer;
		outline: none;
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		margin-top:12px;
		border: none;
		box-shadow: 1px 1px 5px #888888;
		-webkit-tap-highlight-color:transparent;
	}

	#led1:checked{
		background: #0ebeff;
	}

	#led1:after{
		position: absolute;
		content: "";
		width: 1.5em;
		height: 1.5em;
		border-radius: 50%;
		background: #fff;
		-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
		box-shadow: 0 0 .25em rgba(0,0,0,.3);
		-webkit-transform: scale(.7);
		transform: scale(.7);
		left: 0;
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
	}

	#led1:checked:after{
		left: calc(100% - 1.5em);
	}

	#floodlight-status{
		width: 35px;
	}

	#floodlight-text{
		width:80px;
		height:70px;
		font-size:17px;
		text-align: center;
		line-height: 70px;
		color:gray;
	}

	#shadow{
		width:250px;
		height:70px;
		display: flex;
		justify-content: space-around;
		background: rgb(231,235,244);
		border-radius: 5px;
	}

	#led2{
		font-size: 30px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 3.5em;
		height: 1.5em;
		background: #ddd;
		border-radius: 3em;
		position: relative;
		cursor: pointer;
		outline: none;
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		margin-top:12px;
		border: none;
		box-shadow: 1px 1px 5px #888888;
		-webkit-tap-highlight-color:transparent;

	}

	#led2:checked{
		background: #0ebeff;
	}

	#led2:after{
		position: absolute;
		content: "";
		width: 1.5em;
		height: 1.5em;
		border-radius: 50%;
		background: #fff;
		-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
		box-shadow: 0 0 .25em rgba(0,0,0,.3);
		-webkit-transform: scale(.7);
		transform: scale(.7);
		left: 0;
		-webkit-transition: all .1s ease-in-out;
		transition: all .2s ease-in-out;
	}

	#led2:checked:after{
		left: calc(100% - 1.5em);
	}

	#shadow-box{
	}

	#shadow-status{
		width: 35px;
	}

	#shadow-text{
		width:80px;
		height:70px;
		font-size:17px;
		text-align: center;
		line-height: 70px;
		color:gray;
	}

	#title-b{
		width:100px;
		height:26px;
		font-size:17px;
		margin-top:25px;
		text-align: center;
		margin-left:24px;
		color:gray;
	}

	#body-b{
		width:230px;
		height:160px;
		margin:0 auto;
		margin-top:32px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#topbar{
		width:230px;
		height:70px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#topbar .function{
		width:95px;
		height:70px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: rgb(231,235,244);
		border-radius: 5px;
		cursor: pointer;
		-webkit-tap-highlight-color:transparent;
	}



	#topbar .function img{
		wdith:80px;
		height:70px;
	}

	#bottombar{
		width:230px;
		height:70px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#bottombar .function{
		width:95px;
		height:70px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: rgb(231,235,244);
		border-radius: 5px;
		cursor: pointer;
	}

	#body-b .triggler{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size:17px;
		color:gray;
	}

	#bottombar .function img{
		wdith:80px;
		height:70px;
	}

	#title-c{
		width:100px;
		height:26px;
		font-size:17px;
		margin-top:25px;
		text-align: center;
		margin-left:24px;
		color: gray;

	}

	#box-1{
		height:70px;
		width:70px;
		position: absolute;
		left:170px;
		top:35px;
		cursor: pointer;
	}

	#box-1 img{
		width:100%;
		height:100%;
	}

	#box-2{
		height:70px;
		width:70px;
		position: absolute;
		left:90px;
		top:120px;
		cursor: pointer;
	}

	#box-2 img{
		width:100%;
		height:100%;
	}

	#box-3{
		height:70px;
		width:70px;
		position: absolute;
		left:250px;
		top:120px;
		cursor: pointer;
	}

	#box-3 img{
		width:100%;
		height:100%;
	}

	#box-4{
		width:70px;
		height:70px;
		position: absolute;
		left:170px;
		top:205px;
		cursor: pointer;
	}

	#box-4 img{
		width:100%;
		height:100%;
	}

	#title-d{
		width:100px;
		height:26px;
		font-size:17px;
		margin-top:25px;
		text-align: center;
		margin-left:24px;
		color:gray;
	}

	#box-7{
		width:70px;
		height:70px;
		position: absolute;
		left:170px;
		top:30px;
		cursor:pointer;
	}

	#box-7 img{
		width:100%;
		height:100%;
	}

	#box-8{
		width:70px;
		height:70px;
		position: absolute;
		left:250px;
		top:115px;
		cursor:pointer;
	}

	#box-8 img{
		width:100%;
		height:100%;
	}

	#box-9{
		width:70px;
		height:70px;
		position: absolute;
		left:90px;
		top:115px;
		cursor:pointer;
	}

	#box-9 img{
		width:100%;
		height:100%;
	}

	#box-10{
		width:70px;
		height:70px;
		position: absolute;
		left:176px;
		top:200px;
		cursor:pointer;
	}

	#box-cycle{
		width:48px;
		height:48px;
		position: absolute;
		left:184px;
		top:109px;
		cursor:pointer;
	}

	#box-temperature{
		width:50px;
		height:25px;
		position: absolute;
		left:184px;
		top:164px;
		background:white;
		box-shadow: 1px 1px 3px gray;
		border-radius:2px;
		line-height: 25px;
		text-align: center;
		font-size:19px;
	}

	#box-cycle img{
		width:48px;
		height:48px;
	}

	#box-10 img{
		width:100%;
		height:100%;
	}

}
@media (min-width: 992px) and (max-width: 1200px) {
	.phone_wrap{
			  display: none;
	}
	body{
		 /*background:red;*/
	}
   .container{
   		width:90%;
   		/* border:1px solid red; */


   	}
   	.wrapper{
   		/* border:1px solid red; */
		margin-top:50px;
   	}

   	#content{
   		display: flex;
   		margin-top:20px;
   		justify-content: space-between;
   		border:1px solid #ddd;
   	}

    .left{
   		width:200px;
   	}

   .left .moudle li{
   	   height:100px;
   	   line-height: 80px;
	   font-size:20px;

   }

   	.left .index li{
   		height:75px;
   	}


	.left .index li span{
		/*border:1px solid black;*/
		display: block;
		font-size: 18px;
		line-height:55px;
		float:left;
		margin-left:25px;
	}

	.left .index img{
		width:50px;
		height:60px;
		float:left;
	}

   	 #right{
   		width: 790px;
   		height:590px;
   		display: flex;
   		flex-direction: column;
   		justify-content: space-between;
   	}

   	#content #right #content-top{
   		width:100%;
   		height:290px;
   		display: flex;
   		justify-content: space-between;
   	}

   	#content #right #content-top-left{
   		width:390px;
   		height:290px;
   		background:white;
   	}

   	#content #right #content-top-right{
   		width:390px;
   		height:290px;
   		background:white;
   	}

   	#content #right #content-bottom{
   		width:100%;
   		height:290px;
   		display: flex;
   		justify-content: space-between;
   	}

   	#content #right #content-bottom-left{
   		width:390px;
   		height:290px;
   		background:white;
   		position: relative;
   	}

   	#monitor-button{
   		width:300px;
   		height:30px;
   		margin-top:20px;
   		border:0;
   		margin-left:20px;
		/* border:1px solid black; */
   	}

   	#monitor-video{
   		width:300px;
   		height:180px;
   		border:1px solid #ddd;
   		margin-left:20px;
   		margin-top:5px;
   	}

   	#content #right #content-bottom-right{
   		width:390px;
   		height:290px;
   		background:white;
   		position: relative;
   	}

   	#title-a{
   		width:100px;
   		height:26px;
   		font-size:17px;
   		margin-top:25px;
   		text-align: center;
   		margin-left:24px;
   		color:gray;
   	}

   	#body-a{
   		width:250px;
   		height:160px;
   		margin:0 auto;
   		margin-top:32px;
   		display: flex;
   		flex-direction: column;
   		justify-content: space-between;
   	}

   	#floodlight{
   		width:250px;
   		height:70px;
   		display: flex;
   		justify-content: space-around;
   		background: rgb(231,235,244);
   		border-radius: 5px;
   	}

   	#floodlight-box{
   	}

   	#led1{
   		font-size: 30px;
   		-webkit-appearance: none;
   		-moz-appearance: none;
   		appearance: none;
   		width: 3.5em;
   		height: 1.5em;
   		background: #ddd;
   		border-radius: 3em;
   		position: relative;
   		cursor: pointer;
   		outline: none;
   		-webkit-transition: all .2s ease-in-out;
   		transition: all .2s ease-in-out;
   		margin-top:12px;
   		border: none;
   		box-shadow: 1px 1px 5px #888888;
   		-webkit-tap-highlight-color:transparent;
   	}

   	#led1:checked{
   		background: #0ebeff;
   	}

   	#led1:after{
   		position: absolute;
   		content: "";
   		width: 1.5em;
   		height: 1.5em;
   		border-radius: 50%;
   		background: #fff;
   		-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
   		box-shadow: 0 0 .25em rgba(0,0,0,.3);
   		-webkit-transform: scale(.7);
   		transform: scale(.7);
   		left: 0;
   		-webkit-transition: all .2s ease-in-out;
   		transition: all .2s ease-in-out;
   	}

   	#led1:checked:after{
   		left: calc(100% - 1.5em);
   	}

   	#floodlight-status{
   		width: 35px;
   	}

   	#floodlight-text{
   		width:80px;
   		height:70px;
   		font-size:17px;
   		text-align: center;
   		line-height: 70px;
   		color:gray;
   	}

   	#shadow{
   		width:250px;
   		height:70px;
   		display: flex;
   		justify-content: space-around;
   		background: rgb(231,235,244);
   		border-radius: 5px;
   	}

   	#led2{
   		font-size: 30px;
   		-webkit-appearance: none;
   		-moz-appearance: none;
   		appearance: none;
   		width: 3.5em;
   		height: 1.5em;
   		background: #ddd;
   		border-radius: 3em;
   		position: relative;
   		cursor: pointer;
   		outline: none;
   		-webkit-transition: all .2s ease-in-out;
   		transition: all .2s ease-in-out;
   		margin-top:12px;
   		border: none;
   		box-shadow: 1px 1px 5px #888888;
   		-webkit-tap-highlight-color:transparent;

   	}

   	#led2:checked{
   		background: #0ebeff;
   	}

   	#led2:after{
   		position: absolute;
   		content: "";
   		width: 1.5em;
   		height: 1.5em;
   		border-radius: 50%;
   		background: #fff;
   		-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
   		box-shadow: 0 0 .25em rgba(0,0,0,.3);
   		-webkit-transform: scale(.7);
   		transform: scale(.7);
   		left: 0;
   		-webkit-transition: all .1s ease-in-out;
   		transition: all .2s ease-in-out;
   	}

   	#led2:checked:after{
   		left: calc(100% - 1.5em);
   	}

   	#shadow-box{
   	}

   	#shadow-status{
   		width: 35px;
   	}

   	#shadow-text{
   		width:80px;
   		height:70px;
   		font-size:17px;
   		text-align: center;
   		line-height: 70px;
   		color:gray;
   	}

   	#title-b{
   		width:100px;
   		height:26px;
   		font-size:17px;
   		margin-top:25px;
   		text-align: center;
   		margin-left:24px;
   		color:gray;
   	}

   	#body-b{
   		width:230px;
   		height:160px;
   		margin:0 auto;
   		margin-top:32px;
   		display: flex;
   		flex-direction: column;
   		justify-content: space-between;
   	}

   	#topbar{
   		width:230px;
   		height:70px;
   		display: flex;
   		flex-direction: row;
   		justify-content: space-between;
   	}

   	#topbar .function{
   		width:95px;
   		height:70px;
   		display: flex;
   		flex-direction: row;
   		justify-content: center;
   		background: rgb(231,235,244);
   		border-radius: 5px;
   		cursor: pointer;
   		-webkit-tap-highlight-color:transparent;
   	}



   	#topbar .function img{
   		wdith:80px;
   		height:70px;
   	}

   	#bottombar{
   		width:230px;
   		height:70px;
   		display: flex;
   		flex-direction: row;
   		justify-content: space-between;
   	}

   	#bottombar .function{
   		width:95px;
   		height:70px;
   		display: flex;
   		flex-direction: row;
   		justify-content: center;
   		background: rgb(231,235,244);
   		border-radius: 5px;
   		cursor: pointer;
   	}

   	#body-b .triggler{
   		display: flex;
   		flex-direction: row;
   		justify-content: center;
   		align-items: center;
   		font-size:17px;
   		color:gray;
   	}

   	#bottombar .function img{
   		wdith:80px;
   		height:70px;
   	}

   	#title-c{
   		width:100px;
   		height:26px;
   		font-size:17px;
   		margin-top:25px;
   		text-align: center;
   		margin-left:24px;
   		color: gray;

   	}

   	#box-1{
   		height:70px;
   		width:70px;
   		position: absolute;
   		left:170px;
   		top:35px;
   		cursor: pointer;
   	}

   	#box-1 img{
   		width:100%;
   		height:100%;
   	}

   	#box-2{
   		height:70px;
   		width:70px;
   		position: absolute;
   		left:90px;
   		top:120px;
   		cursor: pointer;
   	}

   	#box-2 img{
   		width:100%;
   		height:100%;
   	}

   	#box-3{
   		height:70px;
   		width:70px;
   		position: absolute;
   		left:250px;
   		top:120px;
   		cursor: pointer;
   	}

   	#box-3 img{
   		width:100%;
   		height:100%;
   	}

   	#box-4{
   		width:70px;
   		height:70px;
   		position: absolute;
   		left:170px;
   		top:205px;
   		cursor: pointer;
   	}

   	#box-4 img{
   		width:100%;
   		height:100%;
   	}

   	#title-d{
   		width:100px;
   		height:26px;
   		font-size:17px;
   		margin-top:25px;
   		text-align: center;
   		margin-left:24px;
   		color:gray;
   	}

   	#box-7{
   		width:70px;
   		height:70px;
   		position: absolute;
   		left:170px;
   		top:30px;
   		cursor:pointer;
   	}

   	#box-7 img{
   		width:100%;
   		height:100%;
   	}

   	#box-8{
   		width:70px;
   		height:70px;
   		position: absolute;
   		left:250px;
   		top:115px;
   		cursor:pointer;
   	}

   	#box-8 img{
   		width:100%;
   		height:100%;
   	}

   	#box-9{
   		width:70px;
   		height:70px;
   		position: absolute;
   		left:90px;
   		top:115px;
   		cursor:pointer;
   	}

   	#box-9 img{
   		width:100%;
   		height:100%;
   	}

   	#box-10{
   		width:70px;
   		height:70px;
   		position: absolute;
   		left:176px;
   		top:200px;
   		cursor:pointer;
   	}

   	#box-cycle{
   		width:48px;
   		height:48px;
   		position: absolute;
   		left:184px;
   		top:109px;
   		cursor:pointer;
   	}

   	#box-temperature{
   		width:50px;
   		height:25px;
   		position: absolute;
   		left:184px;
   		top:164px;
   		background:white;
   		box-shadow: 1px 1px 3px gray;
   		border-radius:2px;
   		line-height: 25px;
   		text-align: center;
   		font-size:19px;
   	}

   	#box-cycle img{
   		width:48px;
   		height:48px;
   	}

   	#box-10 img{
   		width:100%;
   		height:100%;
   	}
}
@media(min-width:1200px){
	.phone_wrap{
			  display: none;
	}

    .container{
		width:90%;
		/* border:1px solid black; */

	}
	.wrapper{
		/* border:1px solid red; */
	}

	#content{
		display: flex;
		margin-top:20px;
		justify-content: space-between;
		border:1px solid #ddd;
	}

    .left{
		width:200px;
	}

   .left .moudle li{
	   height:100px;
	   line-height: 80px;
	   font-size:20px;
   }

	.left .index li{
		height:75px;
		/*border:1px solid black;*/
	}

	.left .index li span{
		/*border:1px solid black;*/
		display: block;
		font-size: 18px;
		line-height:55px;
		float:left;
		margin-left:25px;
	}

	.left .index img{
		width:50px;
		height:60px;
		float:left;
	}

	 #right{
		width: 790px;
		height:590px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#content #right #content-top{
		width:100%;
		height:290px;
		display: flex;
		justify-content: space-between;
	}

	#content #right #content-top-left{
		width:390px;
		height:290px;
		background:white;
	}

	#content #right #content-top-right{
		width:390px;
		height:290px;
		background:white;
	}

	#content #right #content-bottom{
		width:100%;
		height:290px;
		display: flex;
		justify-content: space-between;
	}

	#content #right #content-bottom-left{
		width:390px;
		height:290px;
		background:white;
		position: relative;
	}

	#monitor-button{
		width:250px;
		height:30px;
		margin-top:20px;
		border:0;
		margin-left:20px;
	}

	#monitor-video{
		width:300px;
		height:180px;
		border:1px solid #ddd;
		margin-left:20px;
		margin-top:5px;
	}

	#content #right #content-bottom-right{
		width:390px;
		height:290px;
		background:white;
		position: relative;
	}

	#title-a{
		width:100px;
		height:26px;
		font-size:17px;
		margin-top:25px;
		text-align: center;
		margin-left:24px;
		color:gray;
	}

	#body-a{
		width:250px;
		height:160px;
		margin:0 auto;
		margin-top:32px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#floodlight{
		width:250px;
		height:70px;
		display: flex;
		justify-content: space-around;
		background: rgb(231,235,244);
		border-radius: 5px;
	}

	#floodlight-box{
	}

	#led1{
		font-size: 30px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 3.5em;
		height: 1.5em;
		background: #ddd;
		border-radius: 3em;
		position: relative;
		cursor: pointer;
		outline: none;
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		margin-top:12px;
		border: none;
		box-shadow: 1px 1px 5px #888888;
		-webkit-tap-highlight-color:transparent;
	}

	#led1:checked{
		background: #0ebeff;
	}

	#led1:after{
		position: absolute;
		content: "";
		width: 1.5em;
		height: 1.5em;
		border-radius: 50%;
		background: #fff;
		-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
		box-shadow: 0 0 .25em rgba(0,0,0,.3);
		-webkit-transform: scale(.7);
		transform: scale(.7);
		left: 0;
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
	}

	#led1:checked:after{
		left: calc(100% - 1.5em);
	}

	#floodlight-status{
		width: 35px;
		/* border:1px solid black; */
	}

	#floodlight-text{
		width:80px;
		height:70px;
		font-size:17px;
		text-align: center;
		line-height: 70px;
		color:gray;
	}

	#shadow{
		width:250px;
		height:70px;
		display: flex;
		justify-content: space-around;
		background: rgb(231,235,244);
		border-radius: 5px;
	}

	#led2{
		font-size: 30px;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		width: 3.5em;
		height: 1.5em;
		background: #ddd;
		border-radius: 3em;
		position: relative;
		cursor: pointer;
		outline: none;
		-webkit-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		margin-top:12px;
		border: none;
		box-shadow: 1px 1px 5px #888888;
		-webkit-tap-highlight-color:transparent;

	}

	#led2:checked{
		background: #0ebeff;
	}

	#led2:after{
		position: absolute;
		content: "";
		width: 1.5em;
		height: 1.5em;
		border-radius: 50%;
		background: #fff;
		-webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
		box-shadow: 0 0 .25em rgba(0,0,0,.3);
		-webkit-transform: scale(.7);
		transform: scale(.7);
		left: 0;
		-webkit-transition: all .1s ease-in-out;
		transition: all .2s ease-in-out;
	}

	#led2:checked:after{
		left: calc(100% - 1.5em);
	}

	#shadow-box{
	}

	#shadow-status{
		width: 35px;
	}

	#shadow-text{
		width:80px;
		height:70px;
		font-size:17px;
		text-align: center;
		line-height: 70px;
		color:gray;
	}

	#title-b{
		width:100px;
		height:26px;
		font-size:17px;
		margin-top:25px;
		text-align: center;
		margin-left:24px;
		color:gray;
	}

	#body-b{
		width:230px;
		height:160px;
		margin:0 auto;
		margin-top:32px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	#topbar{
		width:230px;
		height:70px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#topbar .function{
		width:95px;
		height:70px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: rgb(231,235,244);
		border-radius: 5px;
		cursor: pointer;
		-webkit-tap-highlight-color:transparent;
	}



	#topbar .function img{
		wdith:80px;
		height:70px;
	}

	#bottombar{
		width:230px;
		height:70px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#bottombar .function{
		width:95px;
		height:70px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: rgb(231,235,244);
		border-radius: 5px;
		cursor: pointer;
	}

	#body-b .triggler{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size:17px;
		color:gray;
	}

	#bottombar .function img{
		wdith:80px;
		height:70px;
	}

	#title-c{
		width:100px;
		height:26px;
		font-size:17px;
		margin-top:25px;
		text-align: center;
		margin-left:24px;
		color: gray;

	}

	#box-1{
		height:70px;
		width:70px;
		position: absolute;
		left:170px;
		top:35px;
		cursor: pointer;
	}

	#box-1 img{
		width:100%;
		height:100%;
	}

	#box-2{
		height:70px;
		width:70px;
		position: absolute;
		left:90px;
		top:120px;
		cursor: pointer;
	}

	#box-2 img{
		width:100%;
		height:100%;
	}

	#box-3{
		height:70px;
		width:70px;
		position: absolute;
		left:250px;
		top:120px;
		cursor: pointer;
	}

	#box-3 img{
		width:100%;
		height:100%;
	}

	#box-4{
		width:70px;
		height:70px;
		position: absolute;
		left:170px;
		top:205px;
		cursor: pointer;
	}

	#box-4 img{
		width:100%;
		height:100%;
	}

	#title-d{
		width:100px;
		height:26px;
		font-size:17px;
		margin-top:25px;
		text-align: center;
		margin-left:24px;
		color:gray;
	}

	#box-7{
		width:70px;
		height:70px;
		position: absolute;
		left:170px;
		top:30px;
		cursor:pointer;
	}

	#box-7 img{
		width:100%;
		height:100%;
	}

	#box-8{
		width:70px;
		height:70px;
		position: absolute;
		left:250px;
		top:115px;
		cursor:pointer;
	}

	#box-8 img{
		width:100%;
		height:100%;
	}

	#box-9{
		width:70px;
		height:70px;
		position: absolute;
		left:90px;
		top:115px;
		cursor:pointer;
	}

	#box-9 img{
		width:100%;
		height:100%;
	}

	#box-10{
		width:70px;
		height:70px;
		position: absolute;
		left:176px;
		top:200px;
		cursor:pointer;
	}

	#box-cycle{
		width:48px;
		height:48px;
		position: absolute;
		left:184px;
		top:109px;
		cursor:pointer;
	}

	#box-temperature{
		width:50px;
		height:25px;
		position: absolute;
		left:184px;
		top:164px;
		background:white;
		box-shadow: 1px 1px 3px gray;
		border-radius:2px;
		line-height: 25px;
		text-align: center;
		font-size:19px;
	}

	#box-cycle img{
		width:48px;
		height:48px;
	}

	#box-10 img{
		width:100%;
		height:100%;
	}
}


